<template>
  <div class="list-filter">
    <el-row type="flex" :gutter="40">
      <el-col class="filter-col" :span="6">
        <el-row type="flex" class="filter-title">
          <el-col>价格</el-col>
          <el-col class="ta-r">0-{{filters.price_lt}}</el-col>
        </el-row>
        <el-row>
          <el-slider
            :step="10"
            v-model="filters.price_lt"
            :min="10"
            :max="+this.topPrice"
            @change="v => this.handleChange('price_lt', v)"
          />
        </el-row>
      </el-col>

      <!-- <el-col class="filter-col" :span="6">
        <el-row type="flex" class="filter-title">
          <el-col>距离</el-col>
          <el-col>{{this.filters.distance}}公里</el-col>
        </el-row>

        <el-row>
          <el-slider
            :step="1"
            v-model="filters.distance"
            :min="1"
            :max="this.maxDistance"
            @change="v => this.handleChange('distance', v)"
          />
        </el-row>
      </el-col> -->


      <el-col class="filter-col" :span="5" v-for="item in listData" :key="item.value">
        <el-row class="filter-title">
          <el-col>{{item.label}}</el-col>
        </el-row>
        <el-row class="filter-wrapper">
          <filterView
            :defaultValue="filters[item.value]"
            :dataSource="hotelOptions[item.valueKey]"
            :onChange="v => handleChange(item.value, v)"
          />
        </el-row>
      </el-col>
      <el-col class="filter-col" :span="4" >
        <el-row type="flex" style="height: 100%" align="middle" justify="center">
          <el-button type="primary" @click="handleCancel">撤销条件</el-button>
        </el-row>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  import filterView from './filterView'
  export default {
    props: {
      defaultValue: {type: Object, default: {}},
      hotelOptions: {type: Object, default: []},
      topPrice: {type: Number, default: 4000},
      onChange: {type: Function, default: () => {}}
    },

    data() {
      const {
        hotellevel,
        price_lt,
        hotelasset,
        hoteltype,
        hotelbrand,
      } = this.defaultValue

      return {
        listData: [
          {label: '住宿等级', value: 'hotellevel', valueKey: 'levels'},
          {label: '住宿类型', value: 'hoteltype', valueKey: 'types'},
          {label: '酒店设施', value: 'hotelasset', valueKey: 'assets'},
          {label: '酒店品牌', value: 'hotelbrand', valueKey: 'brands'},
        ],
        filters: {
          price_lt: +price_lt || 4000,
          hotellevel,
          hoteltype,
          hotelasset,
          hotelbrand,
        }
      }
    },

    components: {
      filterView,
    },

    methods: {
      handleChange(key, value) {
        this.filters[key] = value
        this.onChange(this.filters)
      },

      handleCancel(){
        this.filters = {
          price_lt: 4000,
          hotellevel: "",
          hoteltype: "",
          hotelasset: "",
          hotelbrand: "",
        }

        this.$router.replace({
          path: this.$route.path,
          query: {
            cityName: this.$store.state.hotel.city
          }
        })
        // 强制刷新页面
        setTimeout(v => {window.location.reload()}, 1)
      }
    }
  }
</script>

<style scoped lang="less">
  .list-filter {
    border: 1px solid #ddd;
    padding: 5px 20px;
    color: #666;
  }

  .ta-r {
    text-align: right;
  }

  .filter-col {
    border-right: 1px solid #ddd;
    padding: 5px 0;
  }

  .filter-title {
    font-size: 14px;
  }

  &:last-child {
    border: none;
  }

  .filter-wrapper {
    height: 38px;
    display: flex;
    align-items: center;
  }
</style>
